<template>
  <li>
    <h3>姓名:{{ p.name }}</h3>
    <p>
      爱好:
      <span v-for="item in p.hobby" :key="item"> {{ item }} </span>
    </p>
  </li>
</template>

<script>
export default {
  name: "Item",
  //我们需要通过props选项来接受父组件传递的props属性
  //props的类型可以是一个数组
  //我们一旦接受到了props属性,则会把属性直接放在组件实例上,供我们直接使用
  props: ["p"],
  mounted() {
    console.log(this, "item");
    console.log(this.p, "item");
  },
};
</script>

<style></style>
